<template>
  <div>
    <div class="picker-item">
      <CloudRadioGroup v-model="size">
        <CloudRadioButton value="large"> Large </CloudRadioButton>
        <CloudRadioButton value="default"> Default </CloudRadioButton>
        <CloudRadioButton value="small"> Small </CloudRadioButton>
      </CloudRadioGroup>
    </div>
    <div class="picker-item">
      <CloudDatePicker :size="size" />
    </div>
    <div class="picker-item">
      <CloudMonthPicker :size="size" placeholder="Select Month" />
    </div>
    <div class="picker-item">
      <CloudRangePicker :size="size" />
    </div>
    <div class="picker-item">
      <CloudWeekPicker :size="size" placeholder="Select Week" />
    </div>
  </div>
</template>

<script>
  import moment from 'moment';
  export default {
    title: '5.三种大小',
    subTitle: '三种大小的输入框，若不设置，则为 default。',
    data () {
      return {
        size: 'default',
      }
    },
    methods: {

    }
  }
</script>
<style lang="scss" scoped>
  .picker-item {
    padding-bottom: 10px;
  }
</style>